<template>
  <div class="equi_container">
    <van-nav-bar title="Hisense" class="nav">
      <template #title>
        <h1 style="color: white">Hisense</h1>
      </template>
    </van-nav-bar>

    <van-search disabled placeholder="请输入搜索关键词" @click="seach" />

    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      style="text-align: center"
    >
      <van-swipe-item
        v-for="item in swipe"
        @click="gotoDetail(item.id)"
        :key="item._id"
      >
        <van-image width="70%" height="70%" fit="cover" :src="item.mainImage" />
      </van-swipe-item>
    </van-swipe>

    <h3 class="bt">全部商品</h3>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="100"
    >
      <van-row style="text-align: center; padding-bottom: 50px">
        <van-col
          span="12"
          v-for="(item, index) in goods"
          :key="index"
          style="padding: 5px"
        >
          <van-image
            width="100"
            height="100"
            :src="item.mainImage"
            @click="gotoDetail(item.id)"
          />
          <h4 style="text-align: left">{{ item.name }}</h4>
          <p class="price">
            <span>￥{{ (item.price / 100).toFixed(2) }}</span>
          </p>
        </van-col>
      </van-row>
    </van-list>
  </div>
</template>

<script>
import BackToTop from "../components/BackToTop.vue";
import SwitchBar from '../components/SwitchBar.vue';

export default {
  name: "Home",
  data() {
    return {
      swipe: [],
      goods: [],
      finished: false,
      loading: false,
      page: 1,
      flag_scroll: true,
    };
  },
  methods: {
    seach() {
      this.$router.push("/Search");
    },
    async list(url, res) {
      const {
        data: { ret },
      } = await this.$request.post(url, res);
      return ret;
    },
    gotoDetail(id) {
      this.$router.push({ name: "Goodsdetails", params: { id } });
    },
    async onLoad() {
      console.log(111111);
      const list = await this.list("goods/sort", {
        page: this.page++,
        size: 16,
        sort: "saleQuantity",
      });
      console.log(list);
      this.goods.push(...list.data);
      if (!(this.goods.length < list.total)) {
        this.finished = true;
      }
      this.loading = false;
    },
  },
  activated() {
    this.$parent.showTabbar = true;
  },
  async created() {
    const res = await this.list("goods/sort", {
      page: 1,
      size: 5,
      sort: "saleQuantity",
    });
    this.swipe = res.data;
    const list = await this.list("goods/sort", {
      page: 1,
      size: 16,
      sort: "saleQuantity",
    });
    console.log(this.goods);
    this.goods = list.data;
  },
};
</script>
<style scoped>
.nav {
  background-color: #01887a;
}
.bt {
  padding: 10px;
}
</style>